﻿<div data-bind="with: product">
    <div class="row">
        <div class="large-6 columns">
            <img data-bind="attr: { src: thumbUrl }" class="product-details-image" />
        </div>
        <div id="product-details" class="large-6 columns">
            <div class="product-title" data-bind="text: title"></div>
            <div class="product-value">
                $<span class="value" data-bind="text: price"></span>
            </div>
            <div>
                Rating: <div class="rating" data-bind="ratingValue: avgRating, ratingReadonly: true"></div>
            </div>
            <div data-bind="if: pages()">
                Pages: <span data-bind="text: pages"></span>
            </div>
            Description:<br />
            <p data-bind="text: shortDescription"></p>
            <div data-bind="foreach: additional">
                <div>
                    <span data-bind="text:$data.key"></span> : <span data-bind="text:$data.value"></span>
                </div>
            </div><p></p>
            <button data-bind="click: $parent.addToCart">Add To Cart</button>
            <!--<a data-bind="href: $parent.editUrl">edit</a>-->
        </div>
    </div>
    <!-- use this to display all Recommended Products -->
    <div data-bind="with: $parent.recommendedProducts">
        @Html.Partial("RecommendedProducts")
    </div>

    <!-- use this to display all Recommended Products -->
    <div data-bind="with: $parent.productReviews">
        @Html.Partial("Reviews")
        <div class="row">
            <div class="large-12 columns">
                <a href="javascript:void(0)" class="button" data-bind="href: addReviewUrl">Add Review</a>
            </div>
        </div>
    </div>
</div>

